<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="author" content="wangbo">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{position: relative;left: 0;top: 0;width: 800px;height: 400px;}
    img{width: 800px;height: 400px;}
    a{color:#fff; text-decoration: none; background-color: aqua; position: absolute;top: 50%; display:none }
    .left{left: 0;}
    .right{right: 0;}
    div:hover a{display: block;}

    ul,li{list-style: none;}
    ul{position: absolute;bottom: 20px; left: 50%;}
    li{float: left; border: 1px solid red;width: 20px;height: 20px;border-radius: 50%;margin-left: 5px;}
    .red{background-color: red;}
  </style>
</head>

<body>
  <div onmouseover="clearRight()" onmouseout="IntervalRight()">
    <img src="http://p1.music.126.net/A4oyg7nydQk9na3fCE7ZDg==/109951165421617285.jpg?imageView&quality=89" alt="">
    <a class="left" href="#" onclick="toleft()" > &lt; </a>
    <a class="right"  href="#"  onclick="toRight()" > &gt; </a>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
  <script>

    // 1.找出大于10的数据元素,然后将数据从小到大排序,并将数组去重,将数组返回
    let arr = [10, 20, 210, 130, 33, 44, 40, 3, 4, 40, 30]
    let xin = function (shuzu) {
      let newArr = []
      // for (let i = 0; i < shuzu.length; i++) {
      //   if (shuzu[i]>10) {
      //     newArr.push(shuzu[i])
      //   }        
      // }
      newArr = shuzu.filter((a) => {
        return a > 10
      })
      // console.log(newArr)
      // [20, 210, 130, 33, 44, 40, 40, 30]
      // 默认是字符串首字母来排序,参数变成函数,放置2个参数,,从小到大,前-后.从大到小 后-前
      newArr.sort((a, b) => {
        return a - b
      })
      // [20, 30, 33, 40, 40, 44, 130, 210]
      // 创建数组
      let xin_arr = [];
      // 循环是排序后的组
      for (let i = 0; i < newArr.length; i++) {
        // newArr[i];
        // 没有包含 
        if (!xin_arr.includes(newArr[i])) {
          xin_arr.push(newArr[i])
        }
      }
      //[20, 30, 33, 40, 44, 130, 210]
      console.log(xin_arr)

    }
    // xin(arr)

    // 2. 编写函数 verifyName()  验证变量名 是4-16位,变量名由 字母,数字,下划线,组成,不能数字开头,如果正确返回ture,错误返回false
    let varName = "_abcA123"
    function verifyName(varName) {
      // 长度符合
      if (varName.length >= 4 && varName.length <= 16) {
        // 验证首字母是不是数字
        if (varName[0] >= "0" && varName[0] <= "9") {
          return false
        }
        for (let i = 0; i < varName.length; i++) {
          let code = varName[i];
          // 如果是下划线
          if (code == "_") {
            // 结束本次循环,直接进行下一次
            continue;
            // 判断是不是字母 a-z
          } else if (code >= "a" && code <= "z") {
            // 结束本次循环,直接进行下一次
            continue;
            // 判断是不是大写字母
          } else if (code >= "A" && code <= "Z") {
            // 结束本次循环,直接进行下一次
            continue;
            // 判断是不是数组
          } else if (code >= "1" && code <= "9") {
            // 结束本次循环,直接进行下一次
            continue;
          } else {
            return false
          }
        }
        return true;
      } else {
        return false;
      }
    }
    // console.log(verifyName(varName))

    // 3. 编写函数 checkUser()  验证用户名 是4-16位, 必须包含 大小字母,数字,特殊符号@,#,$,之一,如果正确返回ture,错误返回false
    // 定义 4个ture的值

    let checkUser = function (userName) {
      // 长度不符合直接返回
      if (userName.length < 4 || userName.length > 16) {
        return false;
      }
      // 长度4-16
      // 是否含有小写,默认false,不含
      let has_x = has_d = has_t = has_s = false;
      // 是不是有 大写,默认false,不含     
      for (let code of userName) {
        if (code >= "a" && code <= "z") {
          // 说明含有小写
          has_x = true;
        } else if (code >= "A" && code <= "Z") {
          // 说明是大写
          has_d = true;
          // 不是大写,不是小写,
        } else if (code >= "0" && code <= "9") {
          // 说明是大写
          has_s = true;
          // 不是大写,不是小写,else if(code=="@"||code=="#"||code=="$"){
        } else if ("@#$".includes(code)) {
          has_t = true
          // 不是大写,不是小写,也不是特殊符号
        } else {
          return false;
        }
      }
      // 3个必须都是true
      if (has_x && has_d && has_t && has_s) {
        return true;
      }
      return false;
    }
    console.log(checkUser("rt"))
    // 4.  dom练习 轮播图
    var pic_arr = [
      "http://p1.music.126.net/A4oyg7nydQk9na3fCE7ZDg==/109951165421617285.jpg?imageView&quality=89",
      "http://p1.music.126.net/c27byhx3KVvCle1zykmH_A==/109951165421216056.jpg?imageView&quality=89",
      "http://p1.music.126.net/uU3uL1XvXk7UieISRivS2g==/109951165421640213.jpg?imageView&quality=89",
      "http://p1.music.126.net/Mot-Vbz3JxqI2zbLzye0lQ==/109951165421632886.jpg?imageView&quality=89",
      "http://p1.music.126.net/KLyKvFgCMO68juLWVCgD4A==/109951165421399234.jpg?imageView&quality=89"
    ]
    let imgEle = document.querySelector("img")
    let i = 0;
    let id = setInterval(toRight,1000)
    let liArr = document.querySelectorAll("li")
    // 改变圆点的颜色
    function getRed(i) {
      // 所有的li 都去掉class的属性
      for(let item of liArr) {
        item.className = ""
      }      
      let liEle = liArr[i];
      liEle.className = "red"
    }    
    // 鼠标挪上去,关闭循环
    function clearRight(){
      clearInterval(id)
    }
    // 鼠标挪开,重新开启一个循环器
    function IntervalRight(){
      id = setInterval(toRight,1000)
    }

    function toRight() {
      // 0,1,2,3,4
      i++;
      if (i>pic_arr.length-1) {
        i=0
      }
      imgEle.src = pic_arr[i]
      // 圆点变红
      getRed(i)
    }
    function toleft() {
      // 0,1,2,3,4
      i--;
      if (i<0) {
        i=pic_arr.length-1;
      }
      imgEle.src = pic_arr[i]
      // 原点变红
      getRed(i)
    }
    
  </script>
</body>

</html>